<template>
  <div id="main">
    <div class="main">
      <div class="head">
        <div class="headimg">
          <img src="../../assets/img/headlogo.png" alt="" />
        </div>
        <div class="notice">
          <div class="noticeBody">
            <span>
              <el-icon>
                <BellFilled />
              </el-icon>
            </span>
            <span>您有最新的短信通知,请及时注意查看!</span>
          </div>
        </div>
        <div class="btnimg">
          <div class="imgList">
            <div class="icon">
              <Setting />
            </div>
            <el-popover placement="bottom" :width="200" trigger="click">
              <template #reference>
                <div class="icon">
                  <Bell />
                </div>
              </template>
            </el-popover>
          </div>
          <div class="imgY">
            <img
              src="https://www.evogodz.cn/assets/myIndex3/img/user.jpg"
              alt=""
            />
          </div>
          <el-dropdown style="margin-top: 6%">
            <div class="span">Godz</div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人资料</el-dropdown-item>
                <el-dropdown-item @click="EXITGodz">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="body">
        <div class="bodyM">
          <div class="leftMueu">
            <div class="menuN" placeholder="回到主页">
              <span class="tclass" @click="Index()">
                <Odometer class="iclass"></Odometer>神的导航栏
              </span>
            </div>
            <ul>
              <li @click="routerGodz(1)">
                <el-icon>
                  <Eleme /> </el-icon
                >打字机文字
              </li>
              <li @click="routerGodz(2)">
                <el-icon>
                  <User /> </el-icon
                >个人信息
              </li>
              <li @click="routerGodz(3)">
                <el-icon>
                  <Comment /> </el-icon
                >名言警句
              </li>
              <li @click="routerGodz(4)">
                <el-icon>
                  <Notebook /> </el-icon
                >详细日记
              </li>
              <li @click="routerGodz(5)">
                <el-icon>
                  <Management /> </el-icon
                >重要日记
              </li>
              <li @click="routerGodz(9)">
                <el-icon>
                  <Avatar /> </el-icon
                >神的老师
              </li>
              <li @click="routerGodz(7)">
                <el-icon>
                  <Platform /> </el-icon
                >项目经验
              </li>
              <li @click="routerGodz(6)">
                <el-icon>
                  <Goblet /> </el-icon
                >神的奖项
              </li>
              <li @click="routerGodz(8)">
                <el-icon>
                  <View /> </el-icon
                >神之秘密
              </li>
              <li @click="routerGodz(10)">
                <el-icon>
                  <School /> </el-icon
                >教育经历
              </li>
              <li @click="routerGodz(11)">
                <el-icon>
                  <OfficeBuilding /> </el-icon
                >工作经历
              </li>
              <li @click="routerGodz(12)">
                <el-icon>
                  <Medal /> </el-icon
                >私人名言
              </li>
              <li @click="routerGodz(13)">
                <el-icon>
                  <Guide /> </el-icon
                >我的奋斗
              </li>
              <li @click="routerGodz(14)">
                <el-icon>
                  <Loading /> </el-icon
                >留着备用
              </li>
            </ul>
          </div>
          <div class="rightMain">
            <router-view />
          </div>
        </div>
      </div>
      <div class="bottom"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();

let pass = sessionStorage.getItem("pass");
console.log("进入main页面后,登录变量为:" + pass); //防止出BUG,留着打印
// 判断是否有登录权限
if (pass == "false" || pass == null) {
  alert("煞笔去登录");
  router.push("/");
}

//跳转回首页
const Index = () => {
  router.push("/main");
};
//判断跳转对象
const routerGodz = (num) => {
  switch (num) {
    case 1:
      router.push("/main/typewriter");
      break;
    case 2:
      router.push("/main/personInfo");
      break;
    case 3:
      router.push("/main/aphorisms");
      break;
    case 4:
      router.push("/main/journal");
      break;
    case 5:
      router.push("/main/journalDeta");
      break;
    case 6:
      router.push("/main/godWard");
      break;
    case 7:
      router.push("/main/projectExp");
      break;
    case 8:
      router.push("/main/secret");
      break;
    case 9:
      router.push("/main/teacher");
      break;
    case 10:
      router.push("/main/eduExp");
      break;
    case 11:
      router.push("/main/workExp");
      break;
    case 12:
      router.push("/main/quotes");
      break;
    case 13:
      router.push("/main/struggle");
      break;
    case 14:
      router.push("/main/HelloWorld");
      break;
    default:
      console.log("待续");
      break;
  }
};
//退出
let EXITGodz = () => {
  router.push("/");
};
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  height: 100vh;
  background: url("@/assets/img/bj.png") 100%;

  .main {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .head {
      width: 100%;
      height: 10%;
      overflow: hidden;

      & > div {
        float: left;
      }

      .headimg {
        width: 17%;
        height: 100%;
        position: relative;

        img {
          position: absolute;
          width: 70%;
          margin-left: 15%;
          margin-top: 5%;
        }
      }

      .notice {
        width: 68%;
        height: 100%;

        .noticeBody {
          width: 100%;
          height: 50%;
          margin: 1.5% 0;
          background: linear-gradient(
            transparent,
            rgba(white, 0.3),
            transparent
          );
          overflow: hidden;

          span {
            color: aqua;
            vertical-align: middle;
            line-height: 35px;
            margin-top: 3%;

            &:first-child {
              font-size: 24px;
              margin: 0 1%;
            }
          }
        }
      }

      .btnimg {
        width: 15%;
        height: 100%;

        .imgList {
          float: left;
          width: 40%;
          height: 100%;

          .icon {
            float: right;
            width: 25px;
            padding:0 12.5px;
            margin-top: 25%;
            color: dodgerblue;
            text-align: center;

            &:hover {
              color: aqua;
              cursor: pointer;
            }
          }

          border-right: 2px solid dodgerblue;
          border-image: -webkit-linear-gradient(
              90deg,
              transparent,
              rgba(dodgerblue, 1),
              transparent
            )
            5;
        }

        .imgY {
          width: 20%;
          height: 100%;
          float: left;
          padding: 5% 3%;

          img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
        }

        .span {
          color: aliceblue;
          font-size: 18px;
          padding: 25% 0;
          &:hover {
            color: aqua;
            cursor: pointer;
          }
        }
      }
    }

    .body {
      width: 100%;
      height: 85%;

      .bodyM {
        width: 95%;
        height: 100%;
        margin: 0 auto;

        .leftMueu {
          width: 12.5%;
          margin-right: 2%;
          float: left;
          height: 100%;
          border-image-source: radial-gradient(
            65% 65%,
            transparent 0px,
            transparent 100%,
            cyan 100%
          );
          border-image-slice: 1;
          border-width: 2px;
          border-style: solid;
          background: linear-gradient(
            0deg,
            rgba(white, 0.1),
            rgba(white, 0.3),
            rgba(white, 0.1)
          );

          .menuN {
            width: 80%;
            margin: 0 auto;
            color: cyan;
            font-size: 18px;
            font-weight: bold;
            line-height: 50px;

            &:hover {
              text-shadow: 0 0 10px black;
            }

            .tclass {
              width: 100%;
              display: inline-block;
              text-align: center;
              vertical-align: middle;
              cursor: pointer;

              .iclass {
                width: 32px;
                margin: 0 5%;
                vertical-align: middle;
              }
            }
          }

          ul {
            width: 100%;
            height: 85%;
            overflow: auto;
            list-style: none;

            &::-webkit-scrollbar {
              display: none;
            }

            li {
              width: 80%;
              height: 50px;
              line-height: 50px;
              color: aliceblue;
              font-size: 14px;
              margin: 0 auto;
              text-align: center;
              border-bottom: 1px solid rgba(white, 0.2);

              &:hover {
                color: aqua;
                border-bottom: 1px solid rgba(aqua, 1);
                cursor: pointer;
              }

              .el-icon {
                margin: 0 5%;
                vertical-align: middle;
              }
            }
          }
        }

        .rightMain {
          width: 85%;
          float: right;
          height: 100%;
        }
      }
    }

    .bottom {
      width: 100%;
      height: 5%;
    }
  }
}
</style>
